<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>垂直地面的面</title>
  <style>
    body,
    html,
    #container {
      margin: 0;
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script
    src="https://webapi.amap.com/maps?v=1.4.15&key=309f07ac6bc48160e80b480ae511e1e9&plugin=Map3D,AMap.DistrictSearch"></script>

  <!-- <script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.DistrictSearch"></script> -->
  <script>
    var map = new AMap.Map('container', {
      center: [114.339261, 30.569427],
      viewMode: '3D',
      labelzIndex: 130,
      expandZoomRange: true,
      pitch: 50,
      zoom: 9,
      layers: [
        new AMap.TileLayer.RoadNet({
          // rejectMapMask:true
        }),
        new AMap.TileLayer.Satellite()
      ]
    });

    var object3Dlayer = new AMap.Object3DLayer({ zIndex: 110 });
    map.add(object3Dlayer);

    var opts = {
      subdistrict: 0,
      extensions: 'all',
      level: 'city'
    };

    //利用行政区查询获取边界
    var district = new AMap.DistrictSearch(opts);
    district.search('武汉市', function (status, result) {
      var bounds = result.districtList[0].boundaries;
      var height = 10000;
      var color = '#99ffff';//rgba
      var wall = new AMap.Object3D.Wall({
        path: bounds,
        height: height,
        color: color
      });
      wall.backOrFront = 'both';
      wall.transparent = true;
      object3Dlayer.add(wall);

      //添加描边
      for (var i = 0; i < bounds.length; i += 1) {
        // new AMap.Polyline({
        //     path:bounds[i],
        //     fillColor: '#e8a236', // 多边形填充颜色
        //     fillOpacity: 0.4,
        //     strokeColor:'#99ffff',
        //     strokeWeight:5,
        //     map:map
        // })

        new AMap.Polygon({
          path: bounds[i],
          fillColor: '#e8a236', // 多边形填充颜色
          fillOpacity: 0.1,
          borderWeight: 5, // 线条宽度，默认为 1
          strokeColor: '#99ffff', // 线条颜色
          map: map
        });
      }


    });

    function lnglatToG20(lnglat) {
      lnglat = map.lngLatToGeodeticCoord(lnglat);
      lnglat.x = AMap.Util.format(lnglat.x, 3);
      lnglat.y = AMap.Util.format(lnglat.y, 3);
      return lnglat;
    }

    var lines = new AMap.Object3D.Line();
    var lineGeo = lines.geometry;

    new AMap.DistrictSearch({
      subdistrict: 1,   //返回下一级行政区
      extensions: 'base'
    }).search('武汉市', function (status, result) {
      var provinces = result.districtList[0].districtList;
      console.log(provinces[0].center)
      var points3D = new AMap.Object3D.RoundPoints();
      points3D.transparent = true;
      var pointsGeo = points3D.geometry;
      for (var p = 0; p < provinces.length; p += 1) {
        // var center = lnglatToG20(provinces[p].center);
        var center = lnglatToG20(provinces[p].center);
        var size = Math.max(10, Math.round(Math.random() * 40));
        var height = -size * 13000;

        // 连线
        lineGeo.vertices.push(center.x, center.y, 0);
        lineGeo.vertexColors.push(0, 1, 1, 1);
        lineGeo.vertices.push(center.x, center.y, height);
        lineGeo.vertexColors.push(0, 1, 1, 1);

        pointsGeo.vertices.push(center.x, center.y, 0); // 尾部小点
        pointsGeo.pointSizes.push(5);
        pointsGeo.vertexColors.push(0, 0, 1, 1);

        pointsGeo.vertices.push(center.x, center.y, height); // 空中点
        pointsGeo.pointSizes.push(size);
        pointsGeo.vertexColors.push(p * 0.029, p * 0.015, p * 0.01, 1);
      }

      points3D.borderColor = [0.4, 0.8, 1, 1];
      points3D.borderWeight = 3;
      object3Dlayer.add(lines);
      object3Dlayer.add(points3D);
    });


  </script>
</body>

</html>